import React from 'react';
import { Icon, Button } from 'antd';
import FBHeaderView from '../../component/form-header/View';
import { WeaInputLocale, WeaInput, WeaTextarea, WeaLocaleProvider } from "ecCom";
import api from '../../../../../apis/formEditRight';
import { resultTypes } from '../../../../../constants/form';
import getUrlParams from '../../../../../utils/getUrlParams';

const { getLabel, formatMultiLang } = WeaLocaleProvider;
const getMultiStrFromBase64 = WeaInputLocale.getMultiStrFromBase64;
const PageStatus = {
  NOACCESS: 'noaccess',
  APPLY: 'apply',
  EXAMINING: 'examining'
};

export default class NoRight extends React.Component {
  constructor(props) {
    super(props);

    const { resultPageStatus } = this.props.store;
    const pageStatus = Number(resultTypes.EXAMINING) === Number(resultPageStatus) ? PageStatus.EXAMINING : PageStatus.NOACCESS;

    this.state = {
      pageStatus: pageStatus,
      remark: '',
      loading: false,
      showHeader: props.showHeader
    };
  }

  pageStatusChange = pageStatus => {
    this.setState({ pageStatus });
  }

  apply = () => {
    const { noRight } = this.props;
    const { remark } = this.state;
    const { appid } = noRight;
    const { conversationId = '', conversationType = '' } = getUrlParams();

    const params = {
      appid,
      remark,
      conversationId, 
      conversationType
    };

    this.setState({ loading: true });

    api.apply(params).then(() => {
      this.setState({
        pageStatus: PageStatus.EXAMINING,
        loading: false
      });
    }).catch(() => {
      this.setState({
        loading: false
      });
    });
  }

  applyAndFillin = () => {
    const { noRight, store } = this.props;
    const { appid } = noRight;
    this.setState({ loading: true });

    api.applyMyself(appid).then(() => {
        this.setState({
          loading: false
        });
        const sk = store.shortkey;
        store.shortkey = '';
        store.resultPageStatus = '';
        store.noRight = null;
        store.init(sk);
    }).catch(() => {
      this.setState({
        loading: false
      });
    });
  }

  onRemarkInfoChange = remark => {
    this.setState({ remark });
  }

  render () {
    const { noRight, store } = this.props;
    const { pageStatus, loading, showHeader, remark } = this.state;
    const { rightLevel } = store;

    return (
      <div className='wea-edc-error-box'>
        { showHeader ?
          <FBHeaderView data={{}} /> : null 
        }
         <div className='wea-edc-error-content'>
           {
            pageStatus === PageStatus.NOACCESS &&
            <div className='noaccess'>
              <div className='icon'><Icon type="lock" /></div>
              <div className='error-msg'>
                <WeaInput isBase64={true} inputType={"multilang"} value={getMultiStrFromBase64(noRight.appName)} viewAttr={1} />
                <div>{getLabel(523042, '你没有权限填写该收集表单')}</div>
              </div>
              <div>
                {
                  rightLevel == 2 ?
                    <Button type='primary' loading={loading} onClick={() => this.applyAndFillin()}>{getLabel(523044, '添加权限并填写表单')}</Button>
                  :
                    <Button type='primary' onClick={() => this.pageStatusChange(PageStatus.APPLY)}>{getLabel(523045, '申请权限')}</Button>
                }
              </div>
            </div>
           }
           {
            pageStatus === PageStatus.APPLY && 
            <div className='apply'>
              <div className='tip'>{getLabel(523046, '你是否确认向收集表单创建者')}：<b>{formatMultiLang(noRight.creator)}</b>{getLabel('519946', '申请权限')}</div>
              <div className='form-name'>
                <WeaInput isBase64={true} inputType={"multilang"} value={getMultiStrFromBase64(noRight.appName)} viewAttr={1} />
              </div>
              <WeaTextarea  
                placeholder={getLabel(523047, '添加备注信息（非必填）')}  
                minRows={5} 
                minRows={5}
                onChange={this.onRemarkInfoChange}
                value={remark}
              />
              <div className='btns'>
                <Button type='primary' loading={loading} onClick={this.apply}>
                  {getLabel(523048, '确认') }
                </Button>
                <Button onClick={ () => this.pageStatusChange(PageStatus.NOACCESS) }>
                  {getLabel(523049, '取消') }
                </Button>
              </div>
            </div>
           }
          {
            pageStatus === PageStatus.EXAMINING && 
            <div className='result'>
              <div className='icon'><Icon type="heart" /></div>
              <div>
                <div>
                   <WeaInput isBase64={true} inputType={"multilang"} value={getMultiStrFromBase64(noRight.appName)} viewAttr={1} />
                </div>
                <div>{getLabel(523050, '权限申请已提交！请等待创建者审核。')}</div>
              </div>
            </div>
          }
        </div>
      </div>
    )
  }
}